<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2020/12/22
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>

    <style type="text/css">

        .div{
            display:none;
            border:1px solid ;
            height:40%;
            width:30%;
            position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
            top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
            left:24%;
            z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
            background: white;
        }

        .div1{
            width: 100%;
            height: 100%;
            opacity:0.3;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
            filter:alpha(opacity=80);
            display: none;
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            background-color: rgb(0,0,0);
        }
    </style>
</head>
<body>

  <script>
      $(function () {
          //添加点击事件  点击添加按钮开启div
          $("#tianjiab").click(function () {
              $("#tianjia").show();
              fX2();
              $("#tianjia1").show();
          })
          //添加点击事件  点击关闭按钮关闭div
          $("#guanbi").click(function () {
              $("#tianjia").hide();
              $("#tianjia1").hide();
          })

          //添加点击事件  点击查看供应商按钮开启div
          $("#chaKanGYS #chaKanGYS1").click(function () {
              $("#chaKanGongYingShang").show();
              $("#tianjia1").show();
          })
          //添加点击事件  点击关闭供应商按钮关闭div
          $("#guanbi1").click(function () {
              $("#chaKanGongYingShang").hide();
              $("#tianjia1").hide();
          })


          //修改
          $("#xiugaib").click(function () {
              //判断有没有点击到单选框
              var del = $("input[name='name']:checked").val();
              if (del == undefined) {
                  alert("请选择一行数据");
                  return;
              }
              $("#xiuGaiId").val(del);
              $("#xiugai").show();
              $("#tianjia1").show();
          })
          $("#guanbiS").click(function () {
              $("#xiugai").hide();
              $("#tianjia1").hide();
          })


          //添加点击事件  点击商品详情按钮开启div
          $("#chaKanGYS #ShangPinJieShao").click(function () {
              $("#chaKanGongYing").show();
              $("#tianjia1").show();
          })
          //添加点击事件  点击关闭商品详情按钮关闭div
          $("#guanbiChaKan").click(function () {
              $("#chaKanGongYing").hide();
              $("#tianjia1").hide();
          })


          //删除div
          $("#shanchub").click(function () {
              //判断有没有点击到单选框
              var del = $("input[name='name']:checked").val();
              if (del == undefined) {
                  alert("请选择一行数据");
                  return;
              }
              $("#shanChuDiv").show();
              $("#tianjia1").show();
          })
          //添加点击事件  点击关闭商品详情按钮关闭div
          $("#no").click(function () {
              $("#shanChuDiv").hide();
              $("#tianjia1").hide();
          })

          //图片
          $("#guanbidiv").click(function () {
              $("#xiaZaiTuPian").hide();
              $("#tianjia1").hide();
          })
          //文件
          $("#guanbidiv1").click(function () {
              $("#xiaZaiWenJian").hide();
              $("#tianjia1").hide();
          })

      })

      //商品 查询供应商模糊
      function fX1() {
          //$("select").html('');
          var gongYingShang=$("#gongYingShang").val();

          var data={
              "type":9,
              "gongYingShang":gongYingShang,
          }
          $.ajax({
              url:"/se", //地址
              type:"get",                          //请求方式
              data:data,                         //参数
              dataType:"json",

              success:function (data,status) {
                   $("#select").empty();

                  console.log(data)
                  if(status=="success") {
                      for (var i = 0; i <data.length ; i++) {

                          /*if(data[i].name==gongYingShang){
                              $("#select").append("<option value='"+data[i].name+"' selected>"+data[i].name+"</option>")
                          }else{*/

                          console.log(data[i].gid);
                              $("#select").append("<option value='"+data[i].gid+"' "+(gongYingShang==data[i].name?'selected':'')+" >"+data[i].name+"</option>");
                          //}
                          //"+gongYingShang==data[i].name?selected:+"
                      }

                      console.log("成功了商品模糊查询");

                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }


      //商品 查询供应商
      function fX2() {
          //$("select").html('');
          var gongYingShang=$("#gongYingShang").val();

          var data={
              "type":10,

          }
          $.ajax({
              url:"/se", //地址
              type:"get",                          //请求方式
              data:data,                         //参数
              dataType:"json",

              success:function (data,status) {
                  $("#select").empty();

                  if(status=="success") {
                      for (var i = 0; i <data.length ; i++) {


                              $("#select").append("<option value='"+data[i].gid+"'>"+data[i].name+"</option>")



                      }

                      console.log("成功了商品查询供应商");

                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }

      //商品添加
      function fX3() {
         var name=$("#nameS").val();
         var cas=$("#casS").val();
         var price_info=$("#price_infoS").val();
         var commodity_info=$("#commodity_infoS").val();
         var supplier_id=$("#select").val();

          if(""==$("#nameS").val() || ""==$("#casS").val() ||
              ""==$("#price_infoS").val() || ""==$("#commodity_infoS").val() || ""==$("#select").val()){
              alert("不能为空");
              return;
          }


          var data={
              "type":11,
              "name":name,
              "cas":cas,
              "price_info":price_info,
              "commodity_info":commodity_info,
              "supplier_id":supplier_id,
          }
          $.ajax({
              url:"/se", //地址
              type:"get",                          //请求方式
              data:data,                         //参数
              dataType:"text",

              success:function (data,status) {
                  if(status=="success"){
                      if(data==0){
                          alert("商品已关联");
                      }else if(data==1){
                          window.location.href="/se?type=8";
                          console.log("成功了商品添加");
                      }
                  }

              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }


      //查看供应商文本赋值
      function fxnNameHpone(gid) {
           // var gid=$("#select").val();

          var data={
              "type":12,
              "gid":gid
          }
          $.ajax({
              url:"/se", //地址
              type:"get",                          //请求方式
              data:data,                         //参数
              dataType:"json",

              success:function (data,status) {
                  if(status=="success") {
                      //console.log(data.name+""+data.phone);
                      $("#nameSS").val(data.name);
                      $("#phoneSS").val(data.phone);

                      console.log("成功了查询供应商名称和电话");

                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }

      //修改ajax发送数据
      function xiuGaiShanPIn() {

          var name=$("#nameX").val();
          var cas=$("#casX").val();
          var price_info=$("#price_infoX").val();
          var commodity_info=$("#commodity_infoX").val();
          var sid=$("input[name='name']:checked").val();

          if(""==$("#nameX").val() || ""==$("#casX").val() ||
              $("#price_infoX").val() || $("#commodity_infoX").val()){
              alert("不能为空");
              return;
          }

          var data={
              "name":name,
              "cas":cas,
              "price_info":price_info,
              "commodity_info":commodity_info,
              "type":13,
              "sid":sid
          }
          $.ajax({
              url:"/se", //地址
              type:"post",                          //请求方式
              data:data,                         //参数
              dataType:"text",

              success:function (data,status) {
                  if(status=="success") {
                      console.log("成功了商品添加");
                      // $("#xiugai").hide();
                      // $("#tianjia1").hide();
                      window.location.href="/se?type=8";
                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }

      //商品修改查询id放值到文本框
      function idXiuGaiFuZhi() {

          var sid=$("input[name='name']:checked").val();

          var data={
              "type":14,
              "sid":sid
          }
          $.ajax({
              url:"/se", //地址
              type:"get",                          //请求方式
              data:data,                         //参数
              dataType:"json",

              success:function (data,status) {
                  if(status=="success") {
                      $("#nameX").val(data.name);
                      $("#casX").val(data.cas);
                      $("#price_infoX").val(data.price_info);
                      $("#commodity_infoX").val(data.commodity_info);
                      console.log("成功了修改放值文本框");

                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }

      //商品介绍文本框放值
      function shangPinJieShao(sid) {

          //var sid=$("input[name='name']:checked").val();

          var data={
              "type":15,
              "sid":sid
          }
          $.ajax({
              url:"/se", //地址
              type:"post",                          //请求方式
              data:data,                         //参数
              dataType:"json",

              success:function (data,status) {
                  if(status=="success") {
                      console.log("成功了商品介绍");
                      var imgFile="/img/";
                      $("#name1").val(data.name);
                      $("#cas1").val(data.cas);
                      $("#create_time1").val(data.create_time);
                      $("#update_time1").val(data.update_time);
                      $("#price_info1").val(data.price_info);
                      $("#commodity_info1").val(data.commodity_info);
                      $("#img_path1").attr("src",imgFile+""+data.img_path);

                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }

      //删除 ajax
      function shanChu() {

          var sid=$("input[name='name']:checked").val();

          var data={
              "type":16,
              "sid":sid
          }
          $.ajax({
              url:"/se", //地址
              type:"get",                          //请求方式
              data:data,                         //参数
              dataType:"text",

              success:function (data,status) {
                  if(status=="success") {
                      console.log("成功了删除商品");
                      window.location.href="/se?type=8";
                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }


      //div 放图片
      function divTuPian(sid) {

          //var sid=$("input[name='name']:checked").val();

          var data={
              "type":17,
              "sid":sid
          }
          $.ajax({
              url:"/se", //地址
              type:"post",                          //请求方式
              data:data,                         //参数
              dataType:"json",

              success:function (data,status) {
                  if(status=="success") {
                      var imgFile="/img/";
                      $("#img").attr("src",imgFile+""+data.img_path);
                      $("#xiaZaiTuPian").show();
                      $("#tianjia1").show();

                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }

      //div 放文件
      function divWenJian(sid) {

          var data={
              "type":19,
              "sid":sid
          }
          $.ajax({
              url:"/se", //地址
              type:"post",                          //请求方式
              data:data,                         //参数
              dataType:"json",

              success:function (data,status) {
                  if(status=="success") {
                      var imgFile="/img/";
                      $("#img1").attr("src",imgFile+""+data.file_path);
                      $("#xiaZaiWenJian").show();
                      $("#tianjia1").show();

                  }
              },
              error:function (jqxhr,textStatus,error) {
                  console.log("报错了");
                  console.log(error);
              }
          })
      }

      //文件图片
      $(function () {
         $("#xiazai").click(function () {
             //下载图片
              var img=$("#img").attr("src");
              window.location.href="/se?type=18&img="+img;
         })
          //下载文件
          $("#xiazai1").click(function () {
              var img=$("#img1").attr("src");
              window.location.href="/se?type=20&img="+img;
          })
      })

  </script>

<div style="display: flex;margin-left: 6%">
    <form action="/se" method="get" class="layui-inline">
        <input type="hidden" name="type" value="8">
        产品名称<input type="text" placeholder="请输入" name="name" value="">
          cas号<input type="text" placeholder="请输入" name="cas" value="">
        日期<input type="date" value="" name="riQi">&nbsp;-&nbsp;<input type="date" value="" name="riQi1">
        <input type="submit" value="查询" style="background-color: #00feff">
    </form>

    <input type="button" value="添加" id="tianjiab" style="background-color: #50fa7b;height: 26px" >
    <input type="button" value="修改" id="xiugaib" style="background-color: #50fa7b;height: 26px" onclick="idXiuGaiFuZhi()">
    <input type="button" value="删除" id="shanchub" style="background-color: #50fa7b;height: 26px">


</div>
  <table class="table table-striped">
     <caption></caption>
     <thead>
     <tr>
        <th></th>
        <th>商品编码</th>
        <th>产品名称</th>
        <th>cas号</th>
        <th>报价信息</th>
        <th>业务员名称</th>
        <th>更新日期</th>
        <th>操作</th>
     </tr>
     </thead>
     <tbody>
     <c:forEach var="item" items="${arr}">
         <c:if test="${item.amount>0}">
         <tr style="background-color: #bd93f9">
         </c:if>
         <c:if test="${item.amount<=0}">
             <tr style="background-color: red">
         </c:if>
         <c:if test="${item.amount==null}">
             <tr style="background-color: #00FFFF">
         </c:if>
        <td><input type="radio" name="name" value="${item.sid}"></td>
        <td>${item.sid}</td>
        <td>${item.name}</td>
        <td>${item.cas}</td>
        <td>${item.price_info}</td>
        <td>${item.user_name}</td>
        <td>${item.update_time}</td>
        <td id="chaKanGYS">
            <button id="chaKanGYS1" onclick="fxnNameHpone(${item.supplier_id})">查看供应商</button>
            <button id="ShangPinJieShao" onclick="shangPinJieShao(${item.sid})">商品介绍</button>
         <c:if test="${item.img_status=='0'}">
            <input type="button" hidden="hidden">
         </c:if>
         <c:if test="${item.img_status=='1'}">
                <input type="button" value="图片已上传" onclick="divTuPian(${item.sid})">
         </c:if>

         <c:if test="${item.file_status=='0'}">
                <input type="button" hidden="hidden">
         </c:if>
         <c:if test="${item.file_status=='1'}">
                <input type="button" value="文件已上传" onclick="divWenJian(${item.sid})">
         </c:if>

        </td>
        </tr>
     </c:forEach>
     </tbody>
</table>


  <!--添加-->
  <div class="div" id="tianjia" hidden="hidden" style="height: 50vh;overflow-y: scroll">
          <table>
              <tr>
                  <td><p>添加商品</p></td>
              </tr>
              <tr>
                  <td>供应商名称:</td>
                  <td><input  placeholder="请输入供应商名称" value="" id="gongYingShang"><button style="background-color: #50fa7b;height: 26px" onclick="fX1()">查询</button></td>
              </tr>
              <tr>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
              </tr>
              <tr>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
              </tr>
              <tr>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
                  <td><p>             </p></td>
              </tr>
              <tr>
                  <td>产品名称:</td>
                  <td><input  placeholder="请输入产品名称"  value="" id="nameS"></td>
              </tr>
              <tr>
                  <td>cas号:</td>
                  <td><input  placeholder="请输入cas号" value="" id="casS"></td>
              </tr>
              <tr>
                  <td>供应商名称:</td>
                  <td><select id="select">
<%--                      <option value="15">15</option>--%>
<%--                      <option value="16">16</option>--%>
<%--                      <option value="17" >17</option>--%>
<%--                      <option value="18">18</option>--%>
                      </select>
                  </td>
              </tr>
              <tr>
                  <td>报价信息:</td>
                  <td><input  placeholder="请输入报价信息" value="" id="price_infoS"></td>
              </tr>
              <tr>
                  <td><p>商品介绍:</p></td>
                  <td><textarea  value="" style="height: 108px; margin: 0px; width: 202px;" id="commodity_infoS"></textarea></td>
              </tr>
              <tr>
                  <td><input type="button" value="提交商品" onclick="fX3()"></td>
                  <td><input type="button" value="关闭" id="guanbi"></td>
              </tr>
          </table>
  </div>

  <!--查看供应商-->
  <div class="div" id="chaKanGongYingShang" hidden="hidden" style="height: 50vh;overflow-y: scroll">

      <table>

          <tr>
              <td><p>信息</p></td>
          </tr>
          <tr>
              <td>供应商名称:</td>
              <td><input  value="" id="nameSS"></td>
          </tr>
          <tr>
              <td style="padding-left: 48px;">电话:</td>
              <td><input  value="" id="phoneSS"></td>
          </tr>
          <tr>
              <td><input type="button" value="关闭" id="guanbi1"></td>
          </tr>
      </table>
  </div>


      <!--修改商品信息-->
   <div class="div" id="xiugai" hidden="hidden" style="height: 50vh;overflow-y: scroll">
          <form action="/se" method="post" enctype="multipart/form-data">
          <input type="hidden" name="type" value="13">
          <input type="hidden" name="sid" value="" id="xiuGaiId">
          <table>
              <tr>
                  <td><p>信息</p></td>
              </tr>
              <tr>
                  <td>产品名称:</td>
                  <td><input  value="" id="nameX" name="name" required></td>
              </tr>
              <tr>
                  <td>cas号:</td>
                  <td><input  value="" id="casX" name="cas" required></td>
              </tr>
              <tr>
                  <td>报价信息:</td>
                  <td><input  value="" id="price_infoX" name="price_info" required></td>
              </tr>
              <tr>
                  <td><p>商品介绍:</p></td>
                  <td><textarea  value="" style="height: 108px; margin: 0px; width: 202px;" id="commodity_infoX" name="commodity_info" required></textarea></td>
              </tr>
              <tr>
                  <td><p>&nbsp;&nbsp;&nbsp;</p></td>
                  <td><input type="file" name="img" value="" required></td>
              </tr>
              <tr>
                  <td><p>&nbsp;&nbsp;&nbsp;</p></td>
                  <td><input type="file" name="img1" value="" required></td>
              </tr>
              <tr>
                  <td> <input  type="submit" value="商品修改"></td>
                  <td><input type="button" value="关闭" id="guanbiS"></td>
              </tr>
          </table>
          </form>
      </div>

  <!--商品介绍-->
  <div class="div" id="chaKanGongYing" hidden="hidden" style="height: 50vh;overflow-y: scroll">

          <table>
              <tr>
                  <td><p>商品详情</p></td>
              </tr>
              <tr>
                  <td>产品名称:</td>
                  <td><input value="" id="name1"></td>
              </tr>
              <tr>
                  <td>cas号:</td>
                  <td><input value="" id="cas1"></td>
              </tr>
              <tr>
                  <td>创建日期:</td>
                  <td><input value="" id="create_time1"></td>
              </tr>
              <tr>
                  <td>更新日期:</td>
                  <td><input value="" id="update_time1"></td>
              </tr>
              <tr>
                  <td><p>报价信息:</p></td>
                  <td><textarea  value="" style="height: 108px; margin: 0px; width: 202px;" id="price_info1"></textarea></td>
              </tr>
              <tr>
                  <td><p>商品介绍:</p></td>
                  <td><textarea  value="" style="height: 108px; margin: 0px; width: 202px;" id="commodity_info1"></textarea></td>
              </tr>
              <tr>
                  <td><p>图片:</p></td>
                  <td><img alt="" src="" style="width:50px;height:50px" id="img_path1"></td>
              </tr>
              <tr>
                  <td><input type="button" value="关闭" id="guanbiChaKan"></td>
              </tr>
          </table>
  </div>


  <%--删除确认div--%>
  <div id="shanChuDiv" class="div" style="text-align:center" hidden="hidden">
      <br/>
      <p style="font-size: 20px">&nbsp;&nbsp;确认删除吗？</p>
      <input type="button" value="确认" id="yes" style="background-color: #a8a8a8" onclick="shanChu()">
      &nbsp;&nbsp;&nbsp;&nbsp;  <input type="button" id="no" value="取消" style="background-color: #a8a8a8">
  </div>


  <%--div放入图片--%>
  <div id="xiaZaiTuPian" class="div" style="text-align:center" hidden="hidden">
      <img alt="" src="" style="width:270px;height:274px" id="img">
      <br/>
      <button id="xiazai">下载</button>
      <button id="guanbidiv">关闭</button>
  </div>

  <%--div放入文件--%>
  <div id="xiaZaiWenJian" class="div" style="text-align:center" hidden="hidden">
      <img alt="" src="" style="width:270px;height:274px" id="img1">
      <br/>
      <button id="xiazai1">下载</button>
      <button id="guanbidiv1">关闭</button>
  </div>

  <div class="div1" hidden="hidden" id="tianjia1"></div>
</body>
</html>
